<template>
  <div>
    <div class="group-operation-box padding-top-10">
      <div class="flex align-center justify-end margin-bottom-15">
        <!-- <div>
          <el-button type="primary" size="mini" @click="exportFn('budget')">导出预算</el-button>
          <el-button type="primary" size="mini" @click="exportFn('execute')">导出执行</el-button>
        </div> -->
      </div>

      <data-list :tableData.sync="tableData" ref="dataList"></data-list>
    </div>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import dataList from './components/dataList';
  import Api from '../../api/incomeAndExpenditurePlan';
  import { getLocation } from '@/common/js/utils';

  export default {
    data() {
      return {
        activeName: null,
        searchValue: new Date(),
        tabList: [],
        queryParams: {
          pageSize: 10,
          currentPage: 1,
          total: 0,
        },
        tableData: [],
      };
    },
    mounted() {
      // this.getPackageList();
    },
    methods: {
      async getPackageList(currentPage = 1) {
        let location = getLocation();
        let projectKey = localStorage.getItem('projectKey');
        let param = {
          projectKeys: location == 'operationManagement' ? [projectKey] : null,
        };
        let res = await Api.apiProjectPackageList(param);
        let list = [];
        if (location == 'operationManagement') {
          res.rows.forEach(item => {
            if (item.planInfoList && item.planInfoList.length > 0) {
              item.planInfoList.forEach(plan => {
                list.push(plan);
              });
            }
          });
        } else {
          list = res.rows || [];
        }
        this.tableData = list;
      },

      //导出 1预算 2执行
      async exportFn(type) {
        let planType = type == 'budget' ? 1 : 2;
        await Api.exportPlan({ planType: planType, planYear: this.searchValue.getFullYear() });
      },
    },
    components: {
      dataList,
    },
  };
</script>
<style lang="scss" scoped>
  .tab-menu-box {
    position: sticky;
    z-index: 100;
    height: 44px;
    padding: 0 20px;
    border-bottom: 1px solid #e5e5e5;
    margin-top: 6px;
    .tab-box {
      width: 100%;
      display: flex;
      align-items: center;
      border-bottom: unset !important;
      height: 44px;
      box-sizing: border-box;
      overflow: hidden;
      padding-top: 0;
      .el-tabs {
        flex: 1;

        .el-tabs__header {
          margin-bottom: 0;
        }
      }
    }
    .tab-right-box {
      display: flex;
      align-items: center;
      height: 40px !important;
      padding: 5px 0;
      .button-box {
        .el-button {
          margin-left: 10px;
        }

        .is-round {
          border-radius: 17px;
          min-width: 80px;
        }
      }

      .time-select {
        margin: 0 !important;
        width: 200px;
        margin-left: 15px;
      }
    }
  }
  .search-label {
    width: 70px;
  }
</style>
